<template>
  <div>
    <div class="head jlayoutBetween" @click="pclick" style="margin-top: 1px;">
      <div class="icon" :style="{'font-size':fontSize}">{{title}}
      </div>
      <div class="rPadding" :class="collapse?'rIcon2':'rIcon1'">
      </div>
    </div>
    <transition name="slide-fade">
    <div class="content" style="display: block" v-if="needIfSlot" v-show="!collapse">
      <slot></slot>
    </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'bpmCSubtitle',
  data () {
    return {
      collapse: this.isCollapse,
      needIfSlot: false
    }
  },
  mounted () {
    this.needIfSlot = !this.noneBefore
  },
  props: {
    fontSize: '',
    isCollapse: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    noneBefore: {
      type: Boolean,
      default: false
    },
    param: ''
  },
  methods: {
    pclick () {
      this.collapse = !this.collapse
      this.needIfSlot = true
      this.$emit('click', this.param)
    }
  }
}
</script>

<style scoped>
  .head {
    width: 100%;
    text-align: left;
    vertical-align: middle;
    background: url(/static/images/contentBg.png) repeat-x 0 -363px;
    height: 24px;
  }

  .content {
    width: 100%;
  }

  .icon {
    font-size: 12px;
    font-weight: bolder !important;
    padding: 0px 0px 0px 22px;
    color: #000;
    height: 20px;
    margin: 0;
    margin-left: 12px;
    float: left;
    width: 300px;
    font-weight: 100;
    background: url(/static/images/contentBg.png) no-repeat -192px -97px;
  }

  .rIcon1 {
    background: url(/static/images/contentBg.png) no-repeat -192px -127px;
  }

  .rIcon2 {
    background: url(/static/images/contentBg.png) no-repeat -206px -127px;
  }

  .rPadding {
    cursor: pointer;
    height: 14px;
    width: 13px;
    margin-right: 12px;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(-24px);
    opacity: 0;
  }
</style>
